<!-- 商户卡片 -->
<template>
    <div id='card_container'>
        <div id="cards_box">
            <div class="card_item" v-for="(item, index) in cardsD" :key="index">
                <div id="picture">
                    <img src="" alt="">
                    <img :src="'/src/assets/hotels/p' + (index + 1) + '.webp'" alt="" srcset="">
                    <div id="distance">酒店 | 据您直线{{ item.distance_km }}公里</div>
                </div>
                <div style="padding: 0px 10px;">
                    <div id="name">{{ item.name }}</div>
                    <div id="score_desc">
                        <div id="score">{{ item.score }}分</div>
                        <div id="desc">"{{ item.desc }}"</div>
                    </div>
                    <div id="price_sale">
                        <div id="price">
                            <div id="new_price"><span id="red">￥<span id="qian">{{ item.newPrice }}</span></span><span id="qi">起</span></div>
                            <div id="old_price">￥{{ item.oldPrice }}</div>
                        </div>
                        <div id="sale">已售{{ item.saleMonth }}+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";

// 当前用户的地理坐标
const position = ref(null);
// 筛选周围附近的酒店，公里数
const distanceKm = ref(0);

onMounted(() => {
    // 获取用户地理坐标位置
    getUserLocation()
})

function getUserLocation(){
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        position.value = {
          lat: pos.coords.latitude,
          lng: pos.coords.longitude,
        };
        // 根据用户地理坐标获取周围指定距离的酒店
        getNearHotel(position.value);
        // console.log("当前用户地理位置：",position.value);
      },
      (err) => {
        error.value = err.message;
      }
    );
  } else {
    error.value = '浏览器不支持!';
  }
}

// 使用圆形过滤，过滤出当前用户指定距离的附近酒店
async function getNearHotel(userLocation){
    // 定义搜索半径
    let radiusKm = 3.0;
    
    // 构造查询参数
    let searchArgs = {
        lat:userLocation.lat,
        lon:userLocation.lng,
        radiusKm:radiusKm
    }

    const res = await axios.post("http://localhost:9009/es/searchByLocation",searchArgs);
    console.log("查询到"+ radiusKm + "公里内，存在"+res.data.length+"家酒店/旅社");
    // 处理距离小数点，保留逗号后两位
    for(let item of res.data){
        item.distance_km = item.distance_km.toFixed(2);
    }
    cardsD.value = res.data
}

// 展示酒店信息的数据
let cardsD = ref()

</script>

<style scoped>

#picture {
    position: relative;
}

#name {
    font-size: 15px;
    font-weight: 600;
}

#desc{
    font-size: 13px;
    margin-left: 6px;
}

#score{
    color: #2341c4;
    font-weight: 600;
}

#qi{
  font-size: 12px;  
}

#red{
    color: red;
}

#old_price{
    position: relative;
    top: 7px;
    left: 2px;
    color: #3d3d3d;
    text-decoration: line-through;
}

#old_price, #sale{
    font-size: 12px;
}

#qian{
    font-size: 19px;
    position: relative;
    top: 2px;
}
#qi{
    color: #434343;
}

#sale{
    position: relative;
    top: 7px;
    font-size: 11px;
    color: #434343;
}

#price{
    /* border: solid red 1px; */
    justify-content: space-between;
}

#price_sale{
    margin-top: 5px;
    justify-content: space-between;
}

#score_desc{
    margin-top: 8px;
    
}

#distance {
    position: absolute;
    bottom: 9px;
    left: 10px;
    font-size: 11px;
    color: white;
}

#picture img {
    width: 100%;
    border-radius: 10px;
}

#cards_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 10px;
}

.card_item {
    /* border: solid red 1px; */
    width: 45%;
    margin-top: 10px;
    font-size: 13px;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 17px;
}

#score_desc,
#price_sale,
#price {
    display: flex;
    flex-direction: row;
}
</style>